<div id="dialogue-container" #dialogueBox>


  <div class="choices-box" *ngIf="dialogueChoices">
    <div class="dialogue-choice" *ngFor="let choice of dialogueChoices.choices; let i = index" (mouseenter)="onChoiceEnter(i, choice)"
      (mouseleave)="onChoiceLeave(i, choice)" (click)="onChoiceClicked(i, choice)" [innerHTML]="sanitizer.bypassSecurityTrustHtml(choice.title)"></div>
  </div>

  <!-- <div id="character-box" #characterContainer>
    <div id="character-index-1" class="character"></div>
    <div id="character-index-2" class="character"></div>
    <div id="character-index-3" class="character"></div>
    <div id="character-index-4" class="character"></div>
    <div id="character-index-5" class="character"></div>
  </div> -->

  <div class="dialogue-text-box">

    <div class="name-box">
      <div class="name" [innerHTML]="getTrustedName()"></div>
    </div>

    <div class="content" [innerHTML]="getTrustedAnimatedText()"></div>
  </div>
</div>